(function () {
  //1 获取点击的链接上携带的id
  const id = location.search.substring(4);

  //2 渲染菜谱详情
  // 发起请求
  axios({
    method: "GET",
    url: `http://124.223.14.236:3001/api/recipe/${id}`,
  }).then(function (res) {
    console.log(res);
    // 获取回调的数据
    const menuDetail = res.data.data;
    // 将图片链接赋给变量
    const img = `http://124.223.14.236:3001/public/${menuDetail.img}`;

    // 分别将图片名字详情插入
    document.querySelector(".container .left img").src = img;
    document.querySelector(".container .right h3").innerHTML = menuDetail.name;
    document.querySelector(".container .right p").innerHTML = menuDetail.description;
  });

  //3 渲染美食列表
  // 发起请求
  axios({
    method: "GET",
    url: `http://124.223.14.236:3001/api/recipeInfo`,
    params: {
      recipe_id: id,
    },
  }).then(function (res) {
    console.log(res);
    // 将获取到的数据存入变量
    const list = res.data.data;
    // 判断是否获取到了数据
    if (list.length) {
      // 有的话使用map方法渲染进 list-box 里
      let listStr = list
        .map((item, index) => {
          // item是单个美食
          console.log(item);
          const { img, title, id } = item;
          return `
        <li>
        <a href="detail.html?id=${id}">
          <img src=${"http://124.223.14.236:3001/public/" + img} alt="" />
          <h3>${title}</h3>
        </a>
      </li>
        `;
        })
        .join("");
      // 将封装好的数据渲染进页面
      document.querySelector(".list-box").innerHTML = listStr;
    } else {
      document.body.innerHTML += '<p class="noinfo">没有美食哦...</p>';
    }
  });
})();